<!doctype html>
<html lang="ja">
 <head> 
  <meta charset="UTF-8"> 
  <title>isyindex</title> 
  <link rel="Shortcut Icon" type="image/x-icon" href="css1/favicon.ico"> 
  <link rel="stylesheet" type="text/css" href="css1/layout.css"> 
  <link rel="stylesheet" type="text/css" href="css1/general.css"> 
  <link rel="stylesheet" type="text/css" href="css1/slick.css"> 
  <link rel="stylesheet" type="text/css" href="css1/liMarquee.css"> 
  <link rel="stylesheet" type="text/css" href="css1/index.css"> 
  <link rel="stylesheet" href="./elementui/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/elment.js"></script>
  <style>
    .name {
      margin: 10px;
      font-weight: bold;
    }
    .text {
      margin: 10px;
      font-weight: bold;
    }
  </style>
 </head> 
 <body> 
  <div id="app">
    <el-dialog
      title="书法家详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
        <div>
          <img :src="currentSFJ.img" alt="">
          <div class="name">{{ currentSFJ.name }}</div>
          <div class="text">{{ currentSFJ.text }}</div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="background: #000;border-color: #000;" size="mini" type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <div id="container"> 
    <header id="gHeader"> 
      <div class="logo">
      <a href="javascript:void(0);"><img src="images/logo.png" alt="书法历史长河"></a>
      </div> 
      <div class="menu">
      <a href="javascript:void(0);"><img src="images/menu.png" alt="菜单栏"></a>
      </div> 
    </header> 
    <div class="menuBox"> 
      <div class="menuContent">
      <div class="close">
        <a href="javascript:void(0);"><img src="images/close.png" alt=""></a>
      </div> 
      <p>选择</p> 
      <ul class="menuUl"> 
        <li><a href="javascript:void(0);"><img src="images/imgtext01.png" alt="ABOUTus"><span>关于我们</span></a></li> 
        <li><a href="./3.html"><img src="images/imgtext02.png" alt="works"><span>作品合集</span></a></li> 
      </ul> 
      </div> 
    </div>                                
    <div class="spCover"></div> 
    <div class="cover"></div> 
    <section id="main" class="index"> 
      <div class="sec01 target"> 
      <h1><img data-original="img/index/h1_img.png" alt="书法简史可视化网站" class="lazy"></h1> 
      <div class="arrow">
        <a href="javascript:void(0);"><img data-original="img/index/arrow.png" alt="" class="lazy"></a>
      </div> 
      <div class="imgSec">
        <img src="images/sec01_imgtext.png" alt="半日读书，半日静心" class="lazy">
      </div> 
      
      </div> 
      <div class="sec02" id="a01"> 
      <div class="subListBox fix target"> 
        <ul class="photoUl"> 
          <li v-for="item in scrollList1">
            <a @click="toDetail(item)" href="javascript:void(0);" :data-img="JSON.parse(item.a_img)[0]"><span class="bgTxt"><span class="txt">{{item.a_calliphist}}
              <span>《{{item.a_name}}》</span></span></span>
            </a>
          </li>
        </ul> 
        
        <ul class="photoUl">
          <li v-for="item in scrollList2">
            <a @click="toDetail(item)" href="javascript:void(0);" :data-img="JSON.parse(item.a_img)[0]"><span class="bgTxt"><span class="txt">{{item.a_calliphist}}
              <span>《{{item.a_name}}》</span></span></span>
            </a>
          </li>
        </ul> 
        <ul class="photoUl">
          <li v-for="item in scrollList3">
            <a @click="toDetail(item)" href="javascript:void(0);" :data-img="JSON.parse(item.a_img)[0]"><span class="bgTxt"><span class="txt">{{item.a_calliphist}}
              <span>《{{item.a_name}}》</span></span></span>
            </a>
          </li>
        </ul> 
      </div> 
      <div class="link target">
        <a href="3.html">历代经典书法作品</a>
      </div> 
      </div> 
      <div class="sec03 target"> 
      <h2 class="news_ttl">
        <!-- <img data-original="img/index/h2_img01.png" alt="NEWS" class="lazy"> -->
        书法大家
      </h2> 
      <div class="comNews"> 
        <div class="foo"> 
        <ul class="comNewsUl clearfix"> 
          <li v-for="item in sfjList" @click="showSFJDetail(item)"> <a href="javascript:void(0);" class="clearfix"> <p class="tag">{{ item.name }}</p> 
            <div class="photo">
            <span class="img"><img src="images/bg.png" alt=""></span> 
            <img style="width: 214px;height: 214px;" src="images/lazy_dummy.png" :data-echo="item.img" alt="" class="object-fit-img echo-img"> 
            <span class="bd"></span>
            </div> <p class="txt"><span>{{item.text}}</span></p></a>
          </li>
        </ul>
        </div> 
        <ul class="arrow"> 
        <li class="prev"><a class="nomover" href="javascript:"><img data-original="img/common/prev.png" alt="" class="lazy"></a></li> 
        <li class="next"><a class="nomover" href="javascript:"><img data-original="img/common/next.png" alt="" class="lazy"></a></li> 
        </ul> 
      </div> 
      <div class="link">
        <a href="4.html"><p><span class="top"></span> <span class="middle"></span> <span class="bottom"></span></p>查询</a>
      </div> 
      <div class="mainBox target"> 
        <div class="bgBox">
        <a href="javascript:void(0);" class="clearfix"><span class="comHover01"><span class="subComHover01"> <img data-original="https://tis-home.com/img_top/banner1_pc.jpg?46447" alt="" class="lazy pc"> <img data-original="https://tis-home.com/img_top/banner1_sp.jpg?56322" alt="" class="lazy sp"> </span></span></a>
        </div> 
      </div> 
      </div> 
      <div class="sec04 target"> 
      <h2>
        <!-- <img data-original="img/index/h2_img02.png" alt="EXHIBITION" class="lazy"> -->
        <span>书法藏品</span>
      </h2> 
      
      <div class="comExhibition target"> 
        <ul class="sliderList clearfix"> 
          <li v-for="item in scrollList1" @click="toDetail(item)">
            <a href="#"> 
              <div class="photo">
                <span><span class="sub"> <img :data-lazy="JSON.parse(item.a_img)[0]" width="200" alt=""> <span class="bd"></span></span></span>
              </div> <p>{{item.a_name}}</p> </a></li>
        </ul> 
        <ul class="arrow"> 
        <li class="prev"><img data-original="img/common/prev.png" alt="" class="lazy"></li> 
        <li class="next"><img data-original="img/common/next.png" alt="" class="lazy"></li> 
        </ul> 
      </div> 
      <!-- <div class="comExhibitionLink">
        <a href="javascript:void(0);">书法知识内容</a>
      </div>  -->
      </div> 
      <div class="btmLink target">
      <a href="6.html">书法简史可视化</a>
      </div> 

      
    </section> 
    <footer id="gFooter" class="clearfix"> 
      <div class="bg"> 
      <p class="spFTxt sp">CONTENTS MENU</p> 
      <div class="fInner sp"> 
        <ul class="fNavi"> 
        <li> 
          <ul class="subNavi"> 
            <li><a href="javascript:void(0);"><img src="images/com_imgtext01.png" alt="ABOUT TIS"><span>关于我们</span></a></li> 
            <li><a href="./3.html"><img src="images/com_imgtext02.png" alt="MEMBERS"><span>搜索</span></a></li> 
          </ul> </li> 
        <li> 
          <ul class="subNavi"> 
            <li><a href="javascript:void(0);"><img src="images/com_imgtext01.png" alt="ABOUT TIS"><span>关于我们</span></a></li> 
            <li><a href="./3.html"><img src="images/com_imgtext02.png" alt="MEMBERS"><span>搜索</span></a></li> 
          </ul> </li> 
        </ul> 
      </div> 
      
      
      <div class="fBox"> 
        <div class="pageTop">
        <a href="javascript:void(0);"><img src="images/page_top.gif" alt="" class="pc"><img src="images/sp_page_top.gif" alt="" class="sp"></a>
        </div> 
        
        <p>如果感兴趣可联系我们<span>反馈问题可发送</span></p> 
      </div> 
      </div> 
    </footer> 
    </div> 
  </div> 
  <script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
              scrollList1: [],
              scrollList2: [],
              scrollList3: [],
              mList: [],
              styleList: [],
              eventList: [],
              sfjList: [],
              dialogVisible: false,
              currentSFJ: {}
            }
        },
        created() {
          this.getData()
          fetch('/material/get', {
            method: "POST",
            body: JSON.stringify({
              page: 1,
              pageSize: 10000
            }),
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
          }).then((response) => {
            return response.json().then((res) => {
              this.mList = res.data
            })
          })
          fetch('/style/get', {
            method: "POST",
            body: JSON.stringify({
              page: 1,
              pageSize: 10000
            }),
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
          }).then((response) => {
            return response.json().then((res) => {
              this.styleList = res.data
            })
          })
          fetch('/event/get', {
            method: "POST",
            body: JSON.stringify({
              page: 1,
              pageSize: 10000
            }),
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
          }).then((response) => {
            return response.json().then((res) => {
              this.eventList = res.data
            })
          })
        },
        mounted() {
            this.getSFJ()
        },
        methods: {
            getData() {
                fetch('/property/get', {
                    method: "POST",
                    body: JSON.stringify({
                      page: 1,
                      pageSize: 10000
                    }),
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json"
                    },
                }).then((response) => {
                    return response.json().then((res) => {
                      const total = res.data.length
                      const each = Math.floor(total / 3)
                      this.scrollList1 = res.data.slice(0, each)
                      this.scrollList2 = res.data.slice(each, each * 2)
                      this.scrollList3 = res.data.slice(each * 2, total)
                      console.log(this.scrollList1, this.scrollList2, this.scrollList3)
                    }).catch((err) => {
                        console.log("error :", err)
                    })
                })
            },
            getSFJ() {
              fetch('/sfj/get', {
                  method: "POST",
                  body: JSON.stringify({
                    page: 1,
                    pageSize: 4
                  }),
                  headers: {
                      "Content-Type": "application/json",
                      "Accept": "application/json"
                  },
              }).then((response) => {
                  return response.json().then((res) => {
                    this.sfjList = res.data;
                    console.log(this.sfjList)
                  })
              })
          },
            toDetail(data) {
              data.a_material_name = this.mList.find(v => v.material_num === data.a_material) ? this.mList.find(v => v.material_num === data.a_material).material_name : ''
              data.a_style_name = this.styleList.find(v => v.style_num === data.a_style) ? this.styleList.find(v => v.style_num === data.a_style).style_name : ''
              data.a_material_name = this.eventList.find(v => v.event_num === data.a_event) ? this.eventList.find(v => v.event_num === data.a_event).event_name : ''
              window.location.href="detail.html";
            },
            showSFJDetail(data) {
              this.currentSFJ = data;
              this.dialogVisible = true
            },
            handleClose() {
              this.dialogVisible = false
            }
        }
    })
  </script>

  <script src="js1/jquery.min.js"></script> 
  <script src="js1/jquery.liMarquee.min.js"></script> 
  <script src="js1/iscroll.min.js"></script> 
  <script src="js1/ofi.min.js"></script> 
  <script src="js1/echo.min.js"></script> 
  <script src="js1/common.js"></script> 
  <script src="js1/jquery.lazyload.min.js"></script> 
  <script src="js1/jquery.matchHeight-min.js"></script> 
  <script src="js1/slick.js"></script> 
  <script src="js1/index.js"></script> 


  <script async src="js1/js"></script> 

  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-VN75M6NDT0');
  </script>
 </body>
</html>